<template>
	<view class="continar">
		<!-- 卡片切换图 -->
		<view class="tantan-box">
			<up-navbar title="现场拼桌" :titleStyle="{ color: '#fff', fontSize: '18px', fontWeight: 'bold' }"
				@leftClick="leftClick" :bgColor='bgColor'>
			</up-navbar>

			<template v-if="chooseList.length > 0 || ListNoSeat.length > 0 || AskForList.length>0">
				<!--#ifdef MP-->
				<view class="tantan-bg">
				<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="tantan-bg" style="height:1200rpx">
					<!-- #endif -->
						<!--#ifdef MP-->
						<view :style="'height:' + navbarHeight + 'rpx' "></view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="" style="height: 82rpx;"></view>
						<!-- #endif -->
						<view class="notdeskList-contianr">
							<image class="left-after" src="https://oss.jtmckj.com/drifbottle/left-after.png" mode="">
							</image>
							<image class="rigth-after" src="https://oss.jtmckj.com/drifbottle/right-after.png" mode="">
							</image>
							<notdeskList @cancel="cancelNotChange" :bottleCount="bottleCount" v-if="ListNoSeat.length > 0"
								@update:visible="handlePopupVisibility" :slides="ListNoSeat">
							</notdeskList>
							<notdeskList @cancel="cancelNotChange" :bottleCount="bottleCount" v-else @update:visible="handlePopupVisibility"
								:deutslides="Listdefut">
							</notdeskList>
							<!--无桌台end-->
						</view>
						<view class="list-continar">
							<view class="" style="display: flex;justify-content: space-between;align-items: center;">
								<view class="title">
									有桌来拼
								</view>
								<view class="nofity-box">
									<scroll-view class="tabs-container" scroll-x scroll-with-animation>
										<view class="" style="display: flex;">
											<view class="item-image" v-for="(item,index) in AskForList" :key="index"
												@click="ReceitAtion(item)">
												<template
													v-if="item.logo !='https://oss.jtmckj.com/wmp/images/common/i_default_avatar.png'">
													<image v-if="item.sex == '男'" :src="item.logo" mode=""
														style="border: 2rpx solid #2b00ff;"></image>
													<image v-else :src="item.logo" mode=""
														style="border: 2rpx solid #e745d6;"></image>
												</template>
												<template v-else>
													<image :src="item.logo" mode=""></image>
												</template>
												<view class="border-rd-box" v-if="item.readState == 0"> </view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>

							<view class="list-item-fwrp">
								<view class="list-item-news" v-for="(item,index) in chooseList" :key="index"
									@click="DeskAtion(item,index)">
									<view class="da-box">
										可搭讪
									</view>
									<view class="flex-bwt">
										<image class="logo" v-if="item.sex == '男'" :src="item.logo" mode=""
											style="border: 2rpx solid #2b00ff;"></image>
										<image class="logo" v-else :src="item.logo" mode=""
											style="border: 2rpx solid #e745d6;"></image>
										<view class="rg-contianr">
											<view class="title-li">
												{{item.memberName ? item.memberName : ''}}
											</view>
											<template v-if="item.sex == '男'">
												<view class=" " style="display: flex;">
													<view class="tabs-box">
														<view class="xb-icon">
															<image src="https://oss.jtmckj.com/drifbottle/xb-icon1.png"
																mode="">
															</image>
															<text>{{item.age}}</text>
														</view>
													</view>
												</view>
											</template>
											<template v-else>
												<view class="" style="display: flex;">
													<view class="tabs-box-nr">
														<view class="xb-icon">
															<image src="https://oss.jtmckj.com/drifbottle/xb-icon2.png"
																mode="">
															</image>
															<text>{{item.age}}</text>
														</view>
													</view>
												</view>
											</template>

											<view class="info-text oneellipsis">
												希望：{{item.msg}}
											</view>
										</view>
									</view>
									<view class="list-bottom">
										<view class="date-time">
											{{dayjs(item.joinTime).format('YYYY-MM-DD HH:mm:ss')}}
										</view>
										<view class="roomCode">
											{{item.roomName}}
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="currentlyzt" v-if="chooseList.length < 1">
							<image class="zw-img" src="https://oss.jtmckj.com/drifbottle/notDesk.png" mode=""></image>
							<view class="zt-title">
								暂无桌台~
							</view>
						</view>
					</view>

			</template>
			<template v-else>
				<!--#ifdef MP-->
				<view class="tantan-bg">
				<!-- #endif -->
					<!-- #ifdef H5 -->
					<view class="tantan-bg" style="height:1200rpx">
					<!-- #endif -->
						<!--#ifdef MP-->
						<view :style="'height:' + navbarHeight + 'rpx' "></view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="" style="height: 82rpx;"></view>
						<!-- #endif -->
						<view class="notdeskList-contianr">
							<image class="left-after" src="https://oss.jtmckj.com/drifbottle/left-after.png" mode="">
							</image>
							<image class="rigth-after" src="https://oss.jtmckj.com/drifbottle/right-after.png" mode="">
							</image>
							<notdeskList @cancel="cancelNotChange" :bottleCount="bottleCount" @update:visible="handlePopupVisibility"
								:deutslides="Listdefut">
							</notdeskList>
						</view>
					</view>
					<view class="currentlyzt">
						<image class="zw-img" src="https://oss.jtmckj.com/drifbottle/notDesk.png" mode=""></image>
						<view class="zt-title">
							暂无桌台~
						</view>
					</view>
			</template>
		</view>
		<!-- 卡片切换图 -->

		<!-- 列表end -->
		<!-- 底部tabr -->
		<view class="footer-continar">
			<view class="footer-contet">
				<view class="footer-item footer-left" @click="togglePopup">
					<image src="https://oss.jtmckj.com/drifbottle/footer-item1.png" mode=""></image>
					<view class="title">
						浏览记录
					</view>
				</view>
				<view class="footer-item footer-center" @click="throwtogglePopup">
					<image src="https://oss.jtmckj.com/drifbottle/footer-item2.png" mode=""></image>
					<view class="title">
						发布拼桌
					</view>
				</view>
				<view class="footer-item footer-right" @click="topathMy">
					<image src="https://oss.jtmckj.com/drifbottle/footer-item3.png" mode=""></image>
					<view class="title">
						我的
					</view>
				</view>
			</view>
		</view>
		<!-- 底部tabr -->
		<!-- 接受弹层start -->
		<acceptdialog :visible.sync="jsshowPopup" v-if="jsshowPopup" @confirm="jshandleConfirm" @cancel="jshandleCancel"
			@update:visible="handlePopupVisibility" :slides="acceptList">
		</acceptdialog>
		<!-- 接受弹层end -->
		<!-- 申请拼桌弹层start -->
		<invitadialog :visible.sync="invitashowPopup" v-if="invitashowPopup" @confirm="invitaConfirm"
			@cancel="invitaCancel" @update:visible="invitadVisibility" :slides="inveLItList">
		</invitadialog>
		<!-- 申请拼桌弹层end -->

		<!-- 捞取记录弹层strat -->
		<retrcordialog :show="popupVisible" @close="onPopupClose"></retrcordialog>
		<!-- 捞取记录弹层end -->
		<!-- 发布拼桌弹层 -->
		<throwidftdialog v-if="throwVisible" :show="throwVisible" @close="onthrowPopupClose">
		</throwidftdialog>
		<!-- 发布拼桌弹层 -->
		<!-- 填写个人信息 -->
		<editthrowidftdialog @Yqdelete="deletList"  v-if="editVisible" :show="editVisible"
			@close="editVisible = false" ></editthrowidftdialog> 
		<!-- 填写个人信息 -->
	</view>

</template>

<script setup>
	import { ref } from 'vue';
	import { http } from '@/api/pzApi/http/api.js';
	import invitadialog from './components/Popup/invitadialog.vue';
	import acceptdialog from './components/Popup/acceptdialog.vue';
	import retrcordialog from './components/Popup/retrcordialog.vue';
	import throwidftdialog from './components/Popup/throwidftdialog.vue';
	import editthrowidftdialog from './components/Popup/editthrowidftdialog.vue';
	import notdeskList from './components/Popup/notdeskList.vue';
	import { onLaunch, onShow, onHide, onLoad, onUnload } from '@dcloudio/uni-app'
	import { initStatusBarHeight } from "@/until/tools.js"
	import dayjs from 'dayjs';

	// 计算距离顶部按钮高度
	const navbarHeight = computed(() => {
		const statusBarHeight = initStatusBarHeight();
		return (statusBarHeight) || 200;
	});
    console.log(http.url,'xxxxxxxxxxxxx')

	const globalData = uni.getStorageSync('userInfo')
	
	onUnload((option) => {
		clearMyInterval();
	})
    
	const acceptList = ref([])
	const jsshowPopup = ref(false);

	//接受到邀请操作  
	const ReceitAtion = async (v) => {
		if (v) {
			acceptList.value = [v]
			console.log(acceptList.value, 'acceptList.value ')
			jsshowPopup.value = true
			if (v.readState === 0) return
			getbottleRead(v)
		}
	}

	//标记瓶子已读状态
	const getbottleRead = async (v) => {
		let params = {
			"functionName": "BottleReadState",
			"orgCode": globalData.orgCode,
			"contentData": {
				"bottleCode": v.bottleCode,
				"memberCode": globalData.userCode,
				"memberName": globalData.name,
				"otherMemberCode": v.memberCode,
				"otherMemberName": v.memberName
			}
		}

		const res = await http.post('/AppMemberMallProcess', params);
		getbottleBeat()
	}

	const inveLItList = ref([])
	//桌台接受到邀请操作  
	const DeskAtion = async (v) => {
		if (globalData.code != v.memberCode) {
			if (v) {
				inveLItList.value = [v]
				console.log(inveLItList.value, 'acceptList.value ')
				invitashowPopup.value = true
			}
		} else {
			uni.$u.toast('不能邀请自己房台')
		}

	}



	const bottleCount = ref(0)
	const editplbinfo = ref(null)
	const myaCount = ref(0)
	const myaccpetList = ref([])

	const Count = ref(0)
	// 每隔10秒执行一次操作
	const intervalId = setInterval(() => {
		getbottleBeat()
		Count.value++;
	// }, 10000);
	}, 5000);
   
   const leftClick = ()=> {
	uni.navigateBack({
	    delta: 1
	  });
   }

	// 清空定时器的函数
	function clearMyInterval() {
		clearInterval(intervalId);
	}

	const ListNoSeat = ref([])
	const chooseList = ref([])
	const AskForList = ref([])
	//获取心跳
	const getbottleBeat = async () => {
		let params = {
			"functionName": "bottleBeat",
			"orgCode": globalData.orgCode,
			"contentData": {
				"orgCode": globalData.orgCode,
				"orgName": globalData.orgName,
				"memberCode": globalData.userCode,
				"memberName": globalData.name
			},
		}
      console.log(params,'发送心跳参数-------------')
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			//邀请数量
			bottleCount.value = res.content.rowData.bottleCount

			// 无桌列表
			ListNoSeat.value = res.content.rowData.noSeatList

			// 有桌列表
			chooseList.value = res.content.rowData.seatList
			chooseList.value.map(item => {
				if (item.sex == '男' || item.sex == "") {
					if (!item.Logo) {
						item.Logo =
							'https://oss.jtmckj.com/drifbottle/%E7%9F%A9%E5%BD%A2%201573%402x.png'
					}
				} else {
					if (!item.Logo) {
						item.Logo = 'https://oss.jtmckj.com/drifbottle/defut-logo.png'
					}

				}
			})

			// 个人信息
			uni.setStorageSync('beatInfo', res.content.rowData.info)
			//会话ID
			uni.setStorageSync('sessionId', res.content.rowData.info.sessionId)

			//收到邀请列表
			AskForList.value = res.content.rowData.askForList

			console.log('获取心跳' + Count.value + '次数', res);
		} catch (error) {
			console.error('Error:', error);
		}
	}

	//收到邀请-拒绝操作
	const jshandleConfirm = async (v) => {
		jsshowPopup.value = false
		console.log(v, '拒绝收到的参数')
		let params = {
			"functionName": "bottleRefuse",
			"orgCode": globalData.orgCode,
			"contentData": {
				"sessionid": uni.getStorageSync('sessionId'),
				"memberCode": globalData.userCode,
				"bottleCode": v.bottleCode,
				"itemCode": v.itemCode,
				"otherMemberCode": v.memberCode
			}
		}
		console.log(params, '发送拒绝参数--------------')
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			if (res.opFlag == 1) {
				uni.$u.toast('拒绝邀请')
				getbottleBeat()

			} else {
				uni.$u.toast(res.opMsg)
			}
			console.log(res, '服务器响应数据-----------------')

		} catch (error) {
			console.error('Error:', error);
		}


		console.log('拒绝')
	};

	// 收到邀请-接受操作
	const jshandleCancel = async (v) => {
		console.log(v, 'sssss')
		let params = {
			"functionName": "bottleAccept",
			"orgCode": globalData.orgCode,
			"contentData": {
				"sessionid": uni.getStorageSync('sessionId'),
				"memberCode": globalData.userCode,
				"bottleCode": v.bottleCode,
				"itemCode": v.itemCode,
				"otherMemberCode": v.memberCode
			}
		}
		console.log(params, '接受收到的参数-----------------')
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			if (res.opFlag == 1) {
				uni.$u.toast('接收邀请')
				getbottleBeat()
			} else {
				uni.$u.toast(res.opMsg)
			}
			console.log(res, '服务器响应数据-----------------')

		} catch (error) {
			console.error('Error:', error);
		}

	};


	const jsshowPopupChange = async () => {
		const params = {
			"functionName": "getBootleMyReceive",
			"orgCode": globalData.orgCode,
			"contentData": {
				"memberCode": globalData.userCode,
				"answerState": "",
				"recoveryState": "",
				"state": 2
			}
		}
		console.log(params, '邀请列表参数----------------------------')
		try {
			const res = await http.post('/AppMemberMallProcess', params);
			if (res.opFlag == 1) {
				acceptList.value = res.data.content.rowData
				console.log(acceptList.value.length, 'acceptList.value.length')
				if (acceptList.value.length > 0) {
					jsshowPopup.value = true
				} else {
					uni.$u.toast('暂无邀请')
				}
				console.log(acceptList.value, '收到邀请列表--------')
			}
			console.log(res, '邀请列表数据-----------------')

		} catch (error) {
			console.error('Error:', error);
		}

	}


	const popupVisible = ref(false);
	// 控制弹窗的显示与隐藏
	const togglePopup = () => {
		popupVisible.value = !popupVisible.value;
	};

	//浏览记录关闭弹层
	const onPopupClose = () => {
		popupVisible.value = false
	};

	const topathMy = () => {
		uni.navigateTo({
			url: '/pagesSquare/my/index'
		})
	}

	const handlePopupVisibility = (visible) => {
		jsshowPopup.value = visible;
	};

	const invitadVisibility = (visible) => {
		invitashowPopup.value = visible;
	};


	const throwVisible = ref(false);
	const throwtogglePopup = () => {
		throwVisible.value = !popupVisible.value;
	};

	// 处理弹窗关闭事件
	const onthrowPopupClose = () => {
		throwVisible.value = false
		getbottleBeat()
	};

	const bgColor = ref('transparent');


	const msgContent = uni.getStorageSync('beatInfo')
	console.log(msgContent,'msgContent')
	const invitashowPopup = ref(false)
	//邀请申请拼桌
	const invitaCancel = async (v) => {
		console.log(v, '//邀请确认')
		uni.setStorageSync('lqListData', v)
		editVisible.value = true
	}
	//邀请没兴趣
	const invitaConfirm = async (v) => {
		console.log(v, '拒绝收到的参数')
	}
     
	const editVisible = ref(false)
	
	let tempIndex = ref(null)
    //没有发布拼桌。需要自己去填写拼桌信息
    const cancelNotChange = (index)=> {
		tempIndex.value = index
		uni.$u.toast("请填写个人信息")
		editVisible.value = true
	}
	
	const editonthrowPopup = ()=>{
		// editVisible.value = false
	}
   
   const deletList = (index)=> {
	  ListNoSeat.value.splice(tempIndex.value, 1);
   }
 
	onPageScroll(e => {
		if (e.scrollTop < 20) {
			bgColor.value = 'transparent'
		} else {
			bgColor.value = '#030f1c'
		}
	})

	//默认无桌数据
	const Listdefut = ref([{
			age: "",
			bottleCode: "",
			bottleType: "",
			image: "https://oss.jtmckj.com/drifbottle/defut1.png",
			logo: "",
			memberCode: "",
			memberName: "",
			msg: "",
			sex: ""
		},
		{
			age: "",
			bottleCode: "",
			bottleType: "",
			image: "https://oss.jtmckj.com/drifbottle/defut2.png",
			logo: "",
			memberCode: "",
			memberName: "",
			msg: "",
			sex: ""
		},
		{
			age: "",
			bottleCode: "",
			bottleType: "",
			image: "https://oss.jtmckj.com/drifbottle/defut3.png",
			logo: "",
			memberCode: "",
			memberName: "",
			msg: "",
			sex: ""
		},
		{
			age: "",
			bottleCode: "",
			bottleType: "",
			image: "https://oss.jtmckj.com/drifbottle/defut4.png",
			logo: "",
			memberCode: "",
			memberName: "",
			msg: "",
			sex: ""
		},
		{
			age: "",
			bottleCode: "",
			bottleType: "",
			image: "https://oss.jtmckj.com/drifbottle/defut5.png",
			logo: "",
			memberCode: "",
			memberName: "",
			msg: "",
			sex: ""
		},
	])

	//初始化-----------------
	const Onit = () => {
		getbottleBeat()
	}

	Onit()
</script>

<style scoped lang="less">
	@import url("./style/drifbottle/index.scss");
</style>